<template>
	<view class="safety-code">
		<image class="img_bg" src="/static/image/mine_background.png"></image>
		<!-- 安全码首页 -->
		<view class="top">
			<view class="flex-box">
				<view class="name">姓名</view>
				<view class="text">{{userInfo.real_name}}{{userInfo.archiveType&&`(${userInfo.archiveType})`}}</view>
			</view>
			<view class="flex-box">
				<view class="name">身份证号</view>
				<view class="text">{{userInfo.empIdCard}}</view>
			</view>
		</view>
		<emptyWaybill v-if="info.evalSection===''">没有查询到安全码信息</emptyWaybill>
		<view class="main" v-if="info.evalSection!==''">
			<view class="date">{{datetime}}</view>
			<view class="uqrcode">
				<view class="uqrcode-border" :style="[{borderColor:uqrCodeList[uqrCodeType].color}]">
					<canvas canvas-id="uqrcode"></canvas>
				</view>
			</view>
			<view class="flex-box">
				<view class="text">{{info.evalSectionStage}}</view>
				<view class="text" @click="$goBack('integral')">积分:<span>{{info.grade}}分</span></view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in waybillList" :key="index">
				<view class="label">进行中运单</view>
				<view class="flex-box">
					<view class="name">货物名称</view>
					<view class="text">{{item.goodsInfo}}</view>
				</view>
				<view class="flex-box">
					<view class="name">车牌照/挂车号</view>
					<view class="text">{{item.vehCode}}{{item.trailerVehCode&&"/"+item.trailerVehCode}}</view>
				</view>
				<view class="flex-box">
					<view class="name">押运员</view>
					<view class="text">{{item.escortName}}</view>
				</view>
				<view class="flex-box">
					<view class="name">装货点</view>
					<view class="text">{{item.loadingAddr}}</view>
				</view>
				<view class="flex-box">
					<view class="name">卸货点</view>
					<view class="text">{{item.unloadingAddr}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js' //引入uqrcode.js
	import emptyWaybill from "@/components/tool-empty/waybill";
	import {
		dateFormat
	} from "@/common/util.js"
	export default {
		components: {
			emptyWaybill
		},
		data() {
			return {
				uqrCodeList: {
					A: {
						color: '#409EFF',
						text: '蓝码'
					},
					B: {
						color: '#FFD04D',
						text: '黄码'
					},
					C: {
						color: '#F56C6C',
						text: '红码'
					}
				},
				uqrCodeType: 'A',
				datetime: "",
				info: {
					evalSection: '',
					score: '',
				},
				// 进行中运单
				waybillList: [],
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo
			}
		},
		methods: {
			qrFun(text) {
				uQRCode.make({
					canvasId: 'uqrcode',
					componentInstance: this,
					text: text,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: this.uqrCodeList[this.uqrCodeType].color,
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						// console.log(res);
					},
				})
			}
		},
		mounted() {
			this.$api.currentList({
				archiveCode: this.userInfo.empIdCard,
			}).then(res => {
				const resData = res.data.data;
				// console.log(resData);
				if (resData.length) {
					this.info = resData[0];
					// "2023年2月28日~2023年3月11日"
					this.info.evalSectionStage = this.info.evalSectionStage.replace(/年|月/g, '-')
					this.info.evalSectionStage = this.info.evalSectionStage.replace(/日/g, '')
					this.$store.commit('set_tempData', {
						resData: this.info,
					});
					// console.log(this.info, resData[0], '--------------------------');

					this.uqrCodeType = resData[0].levels;
					this.datetime = dateFormat();
					this.timer = setInterval(() => {
						this.datetime = dateFormat();
					})
					this.$nextTick(() => {
						this.qrFun(JSON.stringify({
							uid: this.userInfo.empIdCard,
							id: resData[0].id,
							// archiveCode: resData[0].archiveCode,
							// archiveName: resData[0].archiveName,
							evalSection: resData[0].evalSection,
							levels: resData[0].levels,
							// grade: resData[0].grade,
							datetime: dateFormat(),
						})); //调用生成二维码方法
					});
					if (resData[0].archiveCode && resData[0].archiveName) {
						// 查询进行中运单
						this.$api.staffWaybillList({
							archiveCode: resData[0].archiveCode,
							archiveName: resData[0].archiveName,
						}).then(res => {
							this.waybillList = res.data.data;
						})
					} else {
						uni.showToast({
							title: "暂无安全码信息，请稍后再试",
							icon: "none"
						})
					}
				}
			})
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.safety-code {
		padding-bottom: 30rpx;

		.list {
			padding: 0 30rpx;
			margin-top: -100rpx;
			position: relative;
			z-index: 2;

			.label {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}

			.item {
				background: #FFFFFF;
				box-shadow: 0 4rpx 6rpx 1rpx rgba(84, 83, 83, 0.16);
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 30rpx 30rpx 40rpx;

				.flex-box {
					display: flex;
					line-height: 36rpx;
					margin-bottom: 26rpx;
					font-size: 26rpx;

					.name {
						color: #666;
						flex: 1;
						white-space: nowrap;
					}

					.text {
						text-align: right;
						color: #333;
						padding-left: 50rpx;
					}
				}
			}
		}

		.main {
			padding: 54rpx 30rpx;
			margin: -100rpx 30rpx 130rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 6rpx 1px rgba(84, 83, 83, 0.16);
			border-radius: 16rpx;
			position: relative;
			z-index: 2;

			.date {
				text-align: center;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #333;
				margin-bottom: 30rpx;
			}

			.uqrcode {
				margin-bottom: 55rpx;
				overflow: hidden;

				.uqrcode-border {
					margin: 0 auto;
					width: 150px;
					border: 6rpx solid;
					padding: 6rpx;
				}

			}

			.flex-box {
				display: flex;
				text-align: center;

				.text {
					flex: 1;
					height: 60rpx;
					line-height: 60rpx;
					background: #F2F2F2;
					border-radius: 8rpx;
					margin-right: 18rpx;
					font-size: 26rpx;
					color: #333;

					span {
						color: #E31919;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}

		}

		.img_bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 450rpx;
		}

		.top {
			padding: 30rpx 30rpx 130rpx;
			position: relative;
			z-index: 2;


			.flex-box {
				display: flex;
				font-size: 28rpx;
				margin-bottom: 28rpx;

				.name {
					color: #666;
					width: 5em;
				}

				.text {
					color: #333;
					flex: 1;
					word-break: break-all;
				}
			}
		}
	}
</style>